<template>
    <el-table
        :data="tableData"
        stripe
        style="width: 100%">
      <el-table-column
          prop="date"
          label="编号"
          width="80">
      </el-table-column>
      <el-table-column
          prop=""
          label="收货人名字"
          width="140">
        <template #default="scope">
          <el-input
              placeholder="请输入内容"
              v-model="input"
              clearable>
          </el-input>
        </template>
      </el-table-column>
      <el-table-column
          prop="iphone"
          label="收货人手机号"
          width="180">
        <template #default="scope">
          <el-input
              placeholder="请输入内容"
              v-model="iphone"
              clearable>
          </el-input>
        </template>
      </el-table-column>
      <el-table-column
          prop="address"
          label="所在省"
          width="140">
        <template #default="scope">
          <el-select v-model="classObj">
            <el-option v-for="item in classArray" :key="item.value" :label="item.name" :value="item.name"/>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
          prop="address"
          label="所在市"
          width="140">
        <template #default="scope">
          <el-select v-model="classObj">
            <el-option v-for="item in classArray" :key="item.value" :label="item.name" :value="item.name"/>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
          prop="address"
          label="所在区"
          width="140">
        <template #default="scope">
          <el-select v-model="classObj">
            <el-option v-for="item in classArray" :key="item.value" :label="item.name" :value="item.name"/>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
          prop="address"
          label="详细地址">
        <template #default="scope">
          <el-input
              placeholder="请输入内容"
              v-model="address"
              clearable>
          </el-input>
        </template>
      </el-table-column>
      <el-table-column
            prop=""
          label="操作">
        <template #default="scope">
          <el-button type="success" @click="weihu(scope.row.id)">修改</el-button>
          <el-button type="danger" @click="open">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


  <el-dialog
      v-model="showAdd"
      title="Tips"
      width="60%"
  >
    <div style="width: 600px">

    </div>
    <template #footer>
      <span>
        <el-button @click="showAdd = false">取消</el-button>
        <el-button type="primary" @click="showAdd = false">
         返回
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      address: '上海市普陀区金沙江路 1518 弄',
      classArray:[{name:"四川省"},{name:"上海市"}],
      classObj:'',
      iphone:'13524498547',
      tableData: [{
        date: '1',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        iphone:'13524498547',
      }, {
        date: '2',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
        iphone:'13524498547',
      }, {
        date: '3',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        iphone:'13524498547',
      }, {
        date: '4',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄',
        iphone:'13524498547',
      }],
      showAdd:false,
      input:"胖头鱼",
    }
  },
  methods:{
    weihu(){
      this.showAdd = true
    },
    open() {
      this.$confirm('确认删除地址吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '成功提交申请!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消提交申请'
        });
      });
    }
  }
}
</script>

<style scoped>

</style>